<template>
  <div class="goods">
    <div class="header">
      <h1 class="title">我的商品</h1>
    </div>
    <div class="fu-title">
      <ul>
        <li  v-for="(item,index) in category" @click="getitem($event,item.id)">
          <p>{{item.cnname}}</p>
        </li>
      </ul>
    </div>
    <goods-item ref="goodsitem"></goods-item>
    <router-link to="/addgoods/0" class="bo-cri"><span >增加</span></router-link>
  </div>
</template>

<script>
import axios from 'axios'

import { Toast } from 'mint-ui'
import mySearch from 'components/common/mySearch.vue'
import goodsItem from 'components/goods/goodsitem.vue'
export default {
  data() {
      return {
        category:[],
      }
    },
    mounted(){
      this.initCatData()
    },
    methods: {
      initCatData(){
        let token = localStorage.getItem("access_token");
        axios.post(HOST + "/Shop/get_category").then((res) => {
          res = res.data
          let result = res.result
          if(result == 'success'){
            this.showsele = true
            let arr = res.data.list
            for(let item of arr){
              this.category.push(item)
            }
          }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
        })
      },
      getitem(event,id){
        let obj = event.target
        let this_li = obj.parentNode
        let ul = this_li.parentNode
        let lis = ul.childNodes
        for(let item of lis){
          item.style.color = '#333'
        }
        this_li.style.color = '#108ee9'
        //调用子组件方法
        this.$refs.goodsitem.getcart(id);
      }
    },
    components:{
      mySearch,
      goodsItem
    }
}
</script>

<style lang="stylus">
.goods
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  .bo-cri
    position:fixed
    bottom:55px
    right:5px
    background:#108ee9
    color:#fff
    padding:15px 10px
    border-radius:50%
    box-shadow: 1px 2px 5px #999
  .header
    position: fixed
    top: 0
    left: 0
    height: 44px
    width: 100%
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1)
    background-color: #26a2ff
    z-index: 1000
    color: #fff
    .title 
      font-size: 16px
      line-height: 44px
      text-align: center
      margin: 0 auto
  .search-cell
    margin-top:44px
  .fu-title
    padding:0 5%
    background:white
    height:43px
    border-bottom:1px solid #d9d9d9
    position:fixed
    z-index:5
    width:90%
    top:44px
    white-space: nowrap
    overflow-y: hidden
    &::-webkit-scrollbar 
      display:none
    ul
      width:100%
      line-height:44px
      height:44px
      li
        display:inline-block
        line-height:43px
        color: #333
        &:first-child
          color:#108ee9
        p
          padding-right:15px
          &.on
            color:#108ee9
        // &:last-child
        //   position:absolute
        //   top:0
        //   right:20px
    
    
</style>